<template>
	<div id="bookstore">
		<ul class="list-group">
            <li class="list-group-item">
				名称<input class="mustInput" type="text" v-model="bookstore.name" placeholder="必填"/>
			</li>
			<li class="list-group-item">
				地址<input class="mustInput" type="text" v-model="bookstore.address" placeholder="请填写书店地址"/>
			</li>
			<li class="list-group-item">
				电话<input class="mustInput" type="text" v-model="bookstore.phone" placeholder="请填写联系方式"/>
			</li>
		</ul>
		<!--按钮-->
        <div v-if="this.$route.params.index >= 0">
            <button type="button" @click="del()" class="btn btn-primary btn-lg btn-block del">删除</button>
			<button type="button" @click="add(bookstore,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
        </div>
        <div v-else>
            	<button type="button" @click="add(bookstore,2)" class="btn btn-primary btn-lg btn-block little">保存并继续添加</button>
				<button type="button" @click="add(bookstore,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
        </div>

		<!--按钮end-->
	</div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'bookstore',
  computed: {
    bookstore () {
        return this.$store.state.system.bookstore
    },
    bookstoreArray(){
    	return this.$store.state.system.school.bookstore
    },
    bookstore_content(){
    	return this.$store.state.system.bookstore_content
    }
  },
  created () {
      this.init()  //初始化
  },
  watch: {
      '$route': 'init'
  },
methods:{
	init() {
        //判断是否是添加
        if(this.$route.params.index >= 0) {
            this.$store.state.system.bookstore = this.$store.state.system.school.bookstore[this.$route.params.index];
            this.$store.state.system.title =  this.$store.state.system.bookstore_content.editTitle
        }else{
            this.empty()//添加成功数据清空
            this.$store.state.system.title =  this.$store.state.system.bookstore_content.title
        }
    },
    del() {
        this.$store.state.system.school.bookstore.splice(this.$route.params.index,1)
        this.$router.go(-1)
    },
    add(param,status) {
        let row = this.checkData(param)
		if(row.status == 1)
		{
            layer.open(row.msg);
		    return false;
		}
		if(this.$route.params.index >= 0)
        {	//修改
            this.$store.state.system.school.bookstore[this.$route.params.index] = param
        }else{
            this.$store.state.system.school.bookstore.push(param)
        }
        layer.open(row.msg);
        this.empty()//添加成功数据清空
        if(status == 1) {
            this.$router.go(-1)
        }
	},  	
	empty() {  //清空数据
        this.$store.state.system.bookstore = {
            name: '',//书店名称
        	address: '',//书店地址
        	phone: '',//联系方式
        }
	},
    checkData(param) {
        if(param.name == ""){
            return { status: 1, msg: {content: '请填写书店名称！', skin: 'msg', time: 2 }}
        }
        var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,20}$/
        if(!reg.test(param.name)){
            return { status: 1, msg: {content: '请填写真实书店名称！', skin: 'msg', time: 2 }}
        }
        if(param.address == ""){
            return { status: 1, msg: {content: '请填写书店地址！', skin: 'msg', time: 2 }}
        }
        var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
        if(!reg.test(param.address)){
            return { status: 1, msg: {content: '请填写真实书店名称！', skin: 'msg', time: 2 }}
        }
        if(param.phone == ""){
            return { status: 1, msg: { content: '请填写手机号码！', skin: 'msg', time: 2 }}
        }
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/
        if(!myreg.test(param.phone)){
        	 return { status: 1, msg: { content: '请填写正确的手机格式', skin: 'msg', time: 2 }}
        }
        return { status: 0, msg: { content: '添加成功！', skin: 'msg', time: 2 }};
	}
}
}
</script>

<style>
	.mustInput{
		text-indent: 1em;
	}
	button.little{
		width: 40%;
		float: left;
		margin-left: 0.5rem;
		padding: 0.15rem;
		background-color: #4a77b0;
		border: none!important;
	    outline: none!important;
	    font-size: 0.3rem;
	}
	button.btn-block{
		margin-top: 0.5rem;
	}
	.btn-block + .btn-block{
		margin-top: 0.5rem;
	}
	.btn:focus{
		background-color: #4a77b0;
		outline: none;
	}
	button.del{
		width: 40%;
		background-color: #f25151;
		border: 1px solid #f25151;
		float: left;
		height: 0.7rem;
		padding: 0;
		margin-left: 0.5rem;
	}
	.del:active{
		background-color: #f25151!important;
		border: 1px solid #f25151!important;
	}
</style>